<script setup>
import { computed,ref } from 'vue';

const emit = defineEmits(['pageChange','pageRefresh'])

// 定义 props
const props = defineProps({
  currentPage: {
    type: Number,
    required: true
  },
  totalPages: {
    type: Number,
    required: true
  }
});
// 计算属性，返回要显示的页码数组
const displayedPages = computed(() => {
  const startPage = Math.max(1, Math.min(props.currentPage - 5, props.totalPages - 10));
  const endPage = Math.min(props.totalPages, startPage + 9);
  return Array.from({ length: endPage - startPage + 1 }, (_, i) => startPage + i);
});

// 方法，用于改变当前页码并触发父组件的 pageChange 事件
function changePage(page) {
  if (page >= 1 && page <= props.totalPages) {
    emit('pageChange', page);
  }
}
function refreshHandle(){
  emit('pageRefresh');
}
</script>

<template>
  <nav class="pagination is-small" role="navigation" aria-label="pagination">
    <a class="pagination-previous" @click.prevent="changePage(currentPage - 1)">上一页</a>
    <a class="pagination-next" @click.prevent="changePage(currentPage + 1)">下一页</a>
    <a class="pagination-next" @click.prevent="refreshHandle()">刷新</a>
    <ul class="pagination-list">
      <li v-for="page in displayedPages" :key="page">
        <a
            v-if="page !== currentPage"
            class="pagination-link"
            :aria-label="'Goto page ' + page"
            @click.prevent="changePage(page)"
        >
          {{ page }}
        </a>
        <a
            v-else
            class="pagination-link is-current"
            :aria-label="'Page ' + page"
            aria-current="page"
        >
          {{ page }}
        </a>

      </li>
      <li>共{{totalPages}}页</li>
     </ul>
  </nav>
</template>

<style scoped>

</style>